<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="wap-font-scale" content="no">
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title><?=$title?></title>
    <link rel="stylesheet" href="/mobile/css/reset.css">
    <link rel="stylesheet" href="/mobile/css/mui.min.css">
    <link rel="stylesheet" href="/mobile/css/main_train.css">
    <script src="/mobile/js/flexible_css.debug.js"></script>
    <script src="/mobile/js/flexible.debug.js"></script>

</head>
<body>
<div id="back-btn-wrap">
    <a class="back-btn" href="javascript:void(0)"></a>试卷编辑
</div>

<div class="content-main">
    <form action="" id="questions-form-wrap" onsubmit="return false;">
        <div class="options-wrap multiple-wrap">
            <label for="optionA">单选</label><input type="radio" value="1" name="type" checked id="">
            <label for="optionB">多选</label><input value="2" type="radio" name="type" id="">
        </div>
        <ul class="questions-wrap">
            <li class="questions-item clearfix"><span class="fl">1</span> <textarea name="question" id="question" placeholder="编辑题目"></textarea></li>
            <li class="option-item clearfix"><span class="fl">A</span> <textarea name="contentA" id="contentA" placeholder="编辑选项内容"></textarea></li>
            <li class="option-item clearfix"><span class="fl">B</span> <textarea name="contentB" id="contentB" placeholder="编辑选项内容"></textarea></li>
            <li class="option-item clearfix"><span class="fl">C</span> <textarea name="contentC" id="contentC" placeholder="编辑选项内容"></textarea></li>
            <li class="option-item clearfix"><span class="fl">D</span> <textarea name="contentD" id="contentD" placeholder="编辑选项内容"></textarea></li>
        </ul>

        <div class="options-wrap">
            <span>正确答案：</span><label for="optionA">A</label><input type="radio" value="1" name="correct-options" id="optionA"><label for="optionB">B</label><input value="2" type="radio" name="correct-options" id="optionB"><label for="optionC">C</label><input value="3" type="radio" name="correct-options" id="optionC"><label for="optionC">D</label><input value="4" type="radio" name="correct-options" id="optionD">
        </div>

        <div class="edit-btn-wrap first clearfix">
            <button id="btn-prev" class="fl">上一题</button>
            <button id="btn-next" class="fr" onsubmit="return false;">下一题</button>
        </div>

        <p class="num-wrap"><i class="num-now">1</i><i>/50</i></p>
        <div class="btn2-wrap">
            <button id="btn-submit" class="btn2" onclick="">提交</button>
        </div>
    </form>
</div>

<script src="/mobile/js/jquery.min.js"></script>
<script src="/mobile/js/common.js"></script>
<script src="/mobile/js/mui.min.js"></script>
<script src="/mobile/js/jrrpc.js"></script>
<script src="/mobile/js/autosize.js"></script>
<script src="/mobile/js/jQueryValidate/jquery.validate.min.js"></script>
<script src="/mobile/js/jQueryValidate/jquery.validate.method.js"></script>

<script>
    function exitEdit(){
        var channelType = iService.getQueryString('channelType');
        var llid = iService.getQueryString('llid');
        var token = iService.getQueryString('token');
        //channelType为1代表从预览页面跳入，否则则为第一次提交从app跳入
        var btnArray = ['确定', '取消'];
        mui.confirm('题目尚未提交，退出将会清除所有编辑，你确定退出吗', '退出编辑', btnArray, function(e) {
            if (e.index == 1) {
            //继续答题 不做处理
            } else {
                if(channelType==1){
                    window.location.href = 'preview?token='+token+'&llid='+llid+'';
                }else {
                    if(iService.getUserAgent().isiOS){
                        editFinishPaper(0);
                    }else if(iService.getUserAgent().isAndroid){
                        h5button.editFinishPaper(0);
                    }
                }
            }
        });
    }
    $(function(){
        mui.init();

        //单选多选
        var que_type = $("input[name='type']");
        que_type.on('change',function(){
            var type = $('input[name=type]:checked').val();
            if(type==1){
                $('input[name=correct-options]').attr('type','radio');

            }else if(type==2){
                $('input[name=correct-options]').attr('type','checkbox');

            }

        });

        $('input[name=correct-options]').on('change',function(){
            console.log($('input[name=correct-options]:checked'));

            var option_choose = $('input[name=correct-options]:checked');
            var option_str = '';
            $.each(option_choose,function(e){
                option_str+=$(this).val()+',';
            });
            option_str.slice(0,option_str.length-1);
        });


        var appParam = iService.getAppParam();

        $(".back-btn").on('click',exitEdit);
        $('textarea').autosize();

        //验证元素
        var validateElement = {
            onkeyup: false,
            onclick: false,
            onfocusout: false,
            onsubmit:false,
            showErrors: function (errorMap, errorList) {
                if (errorList.length > 0) {
                    mui.alert(errorList[0].message,' ',function(){
                    });
                }
            },
            rules: {
                question: {
                    required: true,
                    rangelength:[4,64]
                },
                contentA: {
                    required: true,
                    rangelength:[2,32]
                },
                contentB: {
                    required: true,
                    rangelength:[2,32]
                },
                contentC: {
                    required: true,
                    rangelength:[2,32]
                },
                contentD: {
                    required: true,
                    rangelength:[2,32]
                },
                password: {
                    required: true,
                    minlength: 5
                },
                'correct-options':{
                    required: true
                }
            },
            messages: {
                question: {
                    required: "题目不可为空",
                    rangelength:"题目内容长度为4-64个字符"
                },
                contentA: {
                    required: "选项A不可为空",
                    rangelength:"选项内容长度为2-32个字符"
                },
                contentB: {
                    required: "选项B不可为空",
                    rangelength:"选项内容长度为2-32个字符"
                },
                contentC: {
                    required: "选项C不可为空",
                    rangelength:"选项内容长度为2-32个字符"
                },
                contentD: {
                    required: "选项D不可为空",
                    rangelength:"选项内容长度为2-32个字符"
                },
                'correct-options':{
                    required: '正确选项不可为空'
                }
            }
        };

        function emptyQuestion(que_cur){
            $('input[name=correct-options]').attr("checked",false);
//            $('input[name=type]').get(0).checked = true;
            $(".questions-wrap").html(
                    '<li class="questions-item clearfix"><span class="fl">'+(que_cur+1)+'</span> <textarea name="question" id="question" placeholder="编辑题目"></textarea></li>'+
                    '<li class="option-item clearfix"><span class="fl">A</span> <textarea name="contentA" id="contentA" placeholder="编辑选项内容"></textarea></li>'+
                    '<li class="option-item clearfix"><span class="fl">B</span> <textarea name="contentB" id="contentB" placeholder="编辑选项内容"></textarea></li>'+
                    '<li class="option-item clearfix"><span class="fl">C</span> <textarea name="contentC" id="contentC" placeholder="编辑选项内容"></textarea></li>'+
                    '<li class="option-item clearfix"><span class="fl">D</span> <textarea name="contentD" id="contentD" placeholder="编辑选项内容"></textarea></li>');
            $('textarea').autosize();
        }

        function coverQuestion(que_arr,que_cur){
            $('input[name=type]').get(que_arr[que_cur].type-1).checked = true;
            $(".questions-wrap").html(
                '<li class="questions-item clearfix"><span class="fl">'+(que_cur+1)+'</span> <textarea name="question" id="question" placeholder="编辑题目">'+que_arr[que_cur].topic+'</textarea></li>'+
                '<li class="option-item clearfix"><span class="fl">A</span> <textarea name="contentA" id="contentA" placeholder="编辑选项内容">'+que_arr[que_cur].option_a+'</textarea></li>'+
                '<li class="option-item clearfix"><span class="fl">B</span> <textarea name="contentB" id="contentB" placeholder="编辑选项内容">'+que_arr[que_cur].option_b+'</textarea></li>'+
                '<li class="option-item clearfix"><span class="fl">C</span> <textarea name="contentC" id="contentC" placeholder="编辑选项内容">'+que_arr[que_cur].option_c+'</textarea></li>'+
                '<li class="option-item clearfix"><span class="fl">D</span> <textarea name="contentD" id="contentD" placeholder="编辑选项内容">'+que_arr[que_cur].option_d+'</textarea></li>');
            if(que_arr[que_cur].type==1){
                $('input[name=correct-options]').attr('type','radio');
            }else if(que_arr[que_cur].type==2){
                $('input[name=correct-options]').attr('type','checkbox');
            }
            var option_arr = que_arr[que_cur].correct.split(',');
            $('input[name=correct-options]').attr("checked",false);
            $.each(option_arr,function(e){
                $('input[name=correct-options]').get(option_arr[e]-1).checked = true;
            });
//            $('input[name=correct-options]').get(que_arr[que_cur].option-1).checked = true;
            $('textarea').autosize();
        }

        var QUEMAX = 50;
        var question_total = 0,
                que_arr=[],
                que_cur=1;//当前题数
        document.getElementById('btn-next').addEventListener('tap',function(e){
            e.preventDefault();
             $("#questions-form-wrap").validate(validateElement);
            if(!$("#questions-form-wrap").valid()){
                return false;
            }else {
                var option_choose = $('input[name=correct-options]:checked');
                var option_str = '';
                $.each(option_choose,function(e){
                    option_str+=$(this).val()+',';
                });
                option_str = option_str.slice(0,option_str.length-1);

                var que_arr_cur = {
                    type:$('input[name=type]:checked').val(),
                    topic:$('#question').val(),
                    option_a:$('#contentA').val(),
                    option_b:$('#contentB').val(),
                    option_c:$('#contentC').val(),
                    option_d:$('#contentD').val(),
                    correct:option_str
                };

                if(question_total == que_cur-1){
                    //新添加一道题  que_cur-1为数组下标
//                    que_arr.push(que_arr_cur);
                    que_arr[que_cur-1] = que_arr_cur;
                    question_total += 1;
                    emptyQuestion(que_cur);
                }else if(question_total == que_cur){
                    //总题数不加，
                    que_arr[que_cur-1]=que_arr_cur;
                    emptyQuestion(que_cur);
                } else if(question_total > que_cur){
                    //数组内有下一题
                    que_arr[que_cur-1]=que_arr_cur;
                    coverQuestion(que_arr,que_cur);
                }
                que_cur += 1;
                if(que_cur==QUEMAX){
                    $('#btn-next').hide();
                }
                if(que_cur==1){
                    $('.edit-btn-wrap').addClass('first');
                }else {
                    $('.edit-btn-wrap').removeClass('first');
                }
                $('.num-now').html(que_cur);
            }
        });

        //上一题
        document.getElementById('btn-prev').addEventListener('tap',function(e){
            e.preventDefault();
            //最后一道题不存，否则点击上一题的时候就该验证，如果信息填写不全，用户还要手动删除
            que_cur -= 1;
            $('#btn-next').show();

            if(que_cur==1){
                $('.edit-btn-wrap').addClass('first');
            }else {
                $('.edit-btn-wrap').removeClass('first');
            }
            $('.num-now').html(que_cur);
            coverQuestion(que_arr,que_cur-1);
        });

        var btn_submit = $('#btn-submit');

        //提交题目
        btn_submit.on('click',function(){
            $("#questions-form-wrap").validate(validateElement);
            if(!$("#questions-form-wrap").valid()){
                return false;
            }

            var option_choose = $('input[name=correct-options]:checked');
            var option_str = '';
            $.each(option_choose,function(e){
                option_str+=$(this).val()+',';
            });
            option_str = option_str.slice(0,option_str.length-1);
            var que_arr_cur = {
                type:$('input[name=type]:checked').val(),
                topic:$('#question').val(),
                option_a:$('#contentA').val(),
                option_b:$('#contentB').val(),
                option_c:$('#contentC').val(),
                option_d:$('#contentD').val(),
                correct:option_str
            };

            que_arr[que_cur-1] = que_arr_cur;
            question_total = que_arr.length;

            var que_a = [],que_b = [];
            $.each(que_arr,function(e){
                if(que_arr[e].type==1){
                    que_a.push(que_arr[e]);
                }else if(que_arr[e].type==2){
                    que_b.push(que_arr[e]);
                }
            });
            console.log(que_a); //单选答案
            console.log(que_b); //多选答案

            var llid = iService.getQueryString('llid');
            var token = iService.getQueryString('token');
            var postdata = 'Question/addPost';
            var param = {
                postData:postdata,
                data:{
                    llid:llid,
                    token:token,
                    result: JSON.stringify(que_arr)
                }
            };
            $.extend(param.data,appParam);
            $.JsonRpc(param,submitFun);

            function  submitFun(data){
                console.log(data);
                if(data.code==200){
                    mui.toast(data.data.message);
                    setTimeout(function(){
                        window.location.href = 'preview?token='+token+'&llid='+llid+'';
                    },1500);
                }else if(data.code==401){
                    $('.edit-btn-wrap').css('visibility','hidden');
                    que_cur = data.data.number;
                    $('.num-now').html(que_cur);
                    coverQuestion(que_arr,que_cur-1);
                    mui.alert(data.data.message,' ',function(){});
                }
            }
        });
        $.get('https://www.wzxaini9.cn/api/flow/index/id/11', function (data) {
            console.log($.parseJSON(data));
        })
    });
</script>
</body>
</html>




